@charset 'utf-8';

@import 'common';


.web{
    width: 100%;
    height: 100%;
    position: relative;
}

html,body{
    width: 100%;
    height: 100%;
}

header{
    width: 100%;
    height: gr(87);
    position: absolute;
    top: 0;
    background: #f7f7f7;
    border-bottom: gr(1) solid #c1c1c1;
}

section{
    width: 100%;
    position: absolute;
    top: gr(88);
    bottom: 0;
    overflow-y:scroll ;
    -webkit-overflow-scrolling: touch;
    background: #f3f4f6;
}



nav{
    width: gr(589);
    height: 100%;
    margin: 0 auto;
}

.arrow-left{
    font-size: gr(37);
    color: #848689;
    float: left;
    line-height: gr(87);
}

.help{
    font-size: gr(27);
    float: right;
    line-height: gr(87);
    a{
        color: #999999;
    }
}

.title{
    font-size: gr(28);
    font-weight: normal;
    width: gr(146);
    height: 100%;
    margin: 0 auto;
    line-height: gr(87);
    text-align: center;
}

.tip{
    width: gr(600);
    height: gr(65);
    margin: 0 auto;
    font-size: gr(23);
    color: #333333;
    line-height: gr(65);
}

.paper-type{
    width: 100%;
    height: gr(88);
    border-top: gr(1) solid #dedede;
    border-bottom: gr(1) solid #dedede;
    background: white;
    .inner{
        width: gr(600);
        height: 100%;
        margin: 0 auto;
        font-size: gr(24);
        span:first-of-type{
            color: #696969;
            float: left;
            line-height: gr(88) ;
        }
        span:last-of-type{
            color: #4e4e4e;
            float: right;
            line-height: gr(88) ;
            margin-right: gr(12);
        }
        i{
            float: right;
            line-height: gr(88) ;
        }
    }
}


.real-name,.paper-number{
    width: 100%;
    height: gr(88);
    margin-top: gr(30);
    background: white;
    border-top: gr(1) solid #dedede;
    border-bottom: gr(1) solid #dedede;
     .inner{
        width: gr(600);
        height: 100%;
        margin: 0 auto;
        font-size: 0;
        span{
           width: gr(120);
           height: 100%;
           line-height: gr(88);
           vertical-align: top;
           display: inline-block;
           background: white;
           font-size: gr(24);
        }
        input{
            width: gr(480);
            height: 100%;
            text-indent: gr(43);
            line-height: gr(88);
            border: none;
            font-size: gr(24);
        }
        input::-webkit-input-placeholder{
            color: #cccccc;
        }
    }
}


.paper-number{
    margin-top: 0;
    border-top: none;
}


.code{
     width: 100%;
    height: gr(88);
    margin-top: gr(30);
    background: white;
    border-top: gr(1) solid #dedede;
    border-bottom: gr(1) solid #dedede;
    .inner{
        width: gr(600);
        height: 100%;
        margin: 0 auto;
        font-size: gr(24);
    }
    .left{
        float: left;
        line-height: gr(88);
        color: #696969;
    }
    .right{
        float: right;
        line-height: gr(88);
        color: #113cc6;
    }
    .input-wrap{
        width: gr(350);
        height: gr(88);
        margin: 0 auto;
        input{
            width: 100%;
            height: 100%;
            border: none;
            vertical-align: top;
            text-indent: gr(55);
        }
        
        input::-webkit-input-placeholder{
            font-size: gr(24);
            color: #d6d6d6;
        }
    }
}


.pay-btn{
    width: gr(560);
    height: gr(80);
    background: #cc3333;
    font-size: gr(32);
    color: white;
    line-height: gr(80);
    text-align: center;
    margin: gr(60) auto 0;
    border-radius: gr(10) gr(10);
}

.pay-tip{
    text-align: center;
    font-size: gr(20);
    color: #b1b1b2;
    margin-top: gr(19);
}

.sale-prompt {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    z-index: 122;
    .inner{
        width: gr(550);
        height: gr(300);
        background: #f8f8f8;
        border-radius: gr(10);
        margin: 50% auto 0;
        text-align: center;
        .top{
            width: gr(500);
            height: gr(154);
            margin: 0 auto;
            border-bottom: gr(1) solid #dcdcdc;
            font-size: gr(23);
            color: #666666;    
            p:first-of-type{
                font-size: gr(26);
                height: gr(26);
                padding-top: gr(27);
                color: #333333;
            }  
            p:nth-of-type(2){
                font-size: gr(22);
                height: gr(22);
                margin-top: gr(27);
                color: #666666;
            } 
            p:nth-of-type(3){
                font-size: gr(19);
                height: gr(19);
                margin-top: gr(14);
                color: #666666;
            }    
        }
        .bottom{
            width: gr(500);
            height: gr(144);
            margin: 0 auto;
            font-size: 0;
            padding-top: gr(32);
            span{
                width: gr(235);
                height: gr(80);
                font-size: gr(27);
                display: inline-block;
                text-align: center;
                line-height: gr(80);
                border-radius: gr(5);
            }
            span:first-of-type{
               color: #666666;
               background: white;
               border: gr(1) solid #b7b7b7;
            }
            span:last-of-type{
               color: white;
               background: #d62d31;
               margin-left: gr(25);
            }
        }
    }
}


.success-prompt{
    width: gr(249);
    height: gr(183);
    position: absolute;
    top: gr(336);
    left: gr(196);
    z-index: 100;
    display: none;
    img{
       width: 100%;
    }
}